<template>
  <div id="max">
    <el-card class="card">
      <el-button style="color: black;font-weight: bold;font-size: 20px" type="text" class="classification"
                 icon="el-icon-picture">
        相册集
      </el-button>
      <p>Preserved的博客,相册集频道, 主要记录学习、工作、生活中的一些笔记、随想。
      </p>
    </el-card>
    <el-card class="card">
      <div class="album">
        <el-tabs editable type="card" @edit="handleTabsEdit" @tab-remove="delAlbum">
          <el-tab-pane
              v-for="(item, index) in fromData"
              :key="index"
              :label="item.albumContent"
              :name="index"
              lazy="ture"
          >
            <p class="p1">
              <span class="albumdata">创建人：{{ item.userName }}</span>
              <span class="albumdata">创建时间：{{ item.albumDate }}</span>
              <el-upload
                  :action="url+'album/addMyalbum/'"
                  :data="item"
                  :on-success="reslit"
                  :show-file-list="false"
                  style="float: right;margin-top: -10px"
              >
                <el-button circle icon="el-icon-plus" size="mini" type="primary"></el-button>
              </el-upload>
            </p>
            <template v-for="(Item,Index) in ImgData" :key="Index">
              <div v-if="item.albumId===Item.albumId" class="demo-image__preview">
                <el-popconfirm
                    cancelButtonText='算了'
                    confirmButtonText='是的'
                    title="是否永久删除这张照片？"
                    @confirm="DelAlbums(Item)"
                >
                  <template #reference>
                    <el-button circle class="albumBut" icon="el-icon-delete" size="mini" type="danger"></el-button>
                  </template>
                </el-popconfirm>
                <el-image
                    :initial-index="Index"
                    :preview-src-list="srcList"
                    :src="Item.myalbumUrl"
                    :url-list="srcList.push(Item.myalbumUrl)"
                    class="ambunImg"
                    placeholder="加载失败！"
                >
                </el-image>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";

export default {
  name: "Album",
  data() {
    return {
      empty: false,
      loading: true,
      user: '',
      fromData: {},
      ImgData: {},
      url: this.$axios.defaults.baseURL,
      srcList: [],
      tabIndex: 2
    };
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        if (this.user.userName === undefined) {
          this.$message.error("请先登录!")
        } else {
          this.$prompt('请新建相册', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            this.$axios.post('/album/addAlbum', {albumContent: value, userName: this.user.userName}).then((res) => {
              if (res.data.success) {
                this.$message.success(res.data.message);
                this.getAlbum();
              } else {
                this.$message.error(res.data.message)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消新建'
            });
          });
        }
      }
    },
    getAlbum() {
      this.$axios.post('/album/getAlbum', this.user).then((res) => {
        this.fromData = res.data.data;
        if (this.fromData == null) {
          this.empty = true;
        }
      })
    },
    getmyAlbum() {
      this.$axios.post('/album/getMyalbum', this.user).then((res) => {
        this.ImgData = res.data.data;
      })
    },
    reslit(response) {
      this.getmyAlbum();
      ElMessage.success({
        message: response.message,
        type: 'success'
      });
    },
    DelAlbums(item) {
      this.$axios.post('album/delMyAlbumByid', item).then((res) => {
        if (res.data.success) {
          this.getmyAlbum();
          this.$notify({
            title: '成功',
            message: res.data.message,
            type: 'success'
          });
        } else {
          this.$notify({
            title: '警告',
            message: res.data.message,
            type: 'warning'
          });
        }
      })
    },
    delAlbum(res) {
      this.$confirm('此操作将永久删除相册, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let albumId = this.fromData[res].albumId;
        this.$axios.post("/album/deleteByid", {albumId: albumId}).then((res) => {
          if (res.data.success) {
            this.getAlbum();
            this.$notify({
              title: '成功',
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$notify({
              title: '警告',
              message: res.data.message,
              type: 'warning'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    let userToken = localStorage.getItem('token');
    if (userToken != null) {
      this.$axios.post("/user/getuser", {userToken: userToken}).then((res) => {
        if (res.data.success) {
          this.user = res.data.data;
          this.getAlbum();
          this.getmyAlbum();
          this.loading = false;
        } else {
          this.$alert('登录过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              if (action === "confirm") {
                this.$message({
                  type: 'info',
                  message: '请登录'
                });
                this.$router.push('/blog/personal');
              }
            }
          });
        }
      })
    } else {
      this.$alert('还未登录，请先登录', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          if (action === "confirm") {
            this.$message({
              type: 'info',
              message: '请登录'
            });
            this.$router.push('/blog/personal');
          }
        }
      });
    }

  },
  mounted() {

  }
}
</script>

<style scoped>

.card {
  margin: 10px;
  border-radius: 10px;
}

.imgdiv img {
  margin: 5px 7px;
}

.album_title p {
  display: inline-block;
}


.demo-image__preview {
  display: inline-block;
  transition-duration: 500ms;
  animation: an 500ms ease-out;
  position: relative;
}

@keyframes an {
  from {
    opacity: 0;
    top: 50px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

.el-image img {
  margin-right: 5px !important;
}

.albumtitle {
  font-weight: 600;
  margin-right: 20px;
}

.albumdata {
  margin-right: 20px;
  font-size: 14px;
  color: #a09d9d;
}

.p1 {
  border-bottom: solid 1px #ccc
}

.albumBut {
  position: absolute;
}

.demo-image__preview {
  position: relative
}

.ambunImg {
  width: 392px;
  height: 260px;
  margin-right: 4px;
}

.albumBut {
  top: 5px;
  right: 10px;
}

.demo-image__preview:hover .albumBut {
  z-index: 1000;
}
</style>
